<template>
    <div class="tooth-diagram">
        <div class="tooth-row" v-for="(row, rowIndex) in 2" :key="rowIndex">
            <div class="tooth-side left">
                <div class="tooth-circle" v-for="index in 8" :key="index"
                    :style="getCircleStyle(rowIndex, 'left', index)"
                    @click="handleCircleClick(rowIndex, 'left', index)">
                    {{ 9 - index }}
                </div>
            </div>
            <div class="tooth-side right">
                <div class="tooth-circle" v-for="index in 8" :key="index"
                    :style="getCircleStyle(rowIndex, 'right', index)"
                    @click="handleCircleClick(rowIndex, 'right', index)">
                    {{ index }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        fixedClass: {
            type: [Array, String],
            required: true
        },
        activityClass: {  // 已有 activityClass
            type: [Array, String],
            required: true
        },
        paiClass: {  // 新增 paiClass
            type: [Array, String],
            required: true
        }
    },
    computed: {
        parsedFixedClass() {
            return typeof this.fixedClass === 'string' ? JSON.parse(this.fixedClass) : this.fixedClass;
        },
        parsedActivityClass() {  // 已有 activityClass
            return typeof this.activityClass === 'string' ? JSON.parse(this.activityClass) : this.activityClass;
        },
        parsedPaiClass() {  // 新增解析 paiClass
            return typeof this.paiClass === 'string' ? JSON.parse(this.paiClass) : this.paiClass;
        }
    },
    methods: {
        getCircleStyle(rowIndex, side, index) {
            const position = rowIndex === 0 ? '上' : '下';
            const toothPosition = (side === 'left' ? '左' : '右') + position;
            const toothNo = side === 'left' ? 9 - index : index;

            // 只处理传入的类别，其余类别为空数组
            const activeClass = (this.parsedPaiClass.length > 0 && this.parsedPaiClass) ||
                (this.parsedActivityClass.length > 0 && this.parsedActivityClass) ||
                (this.parsedFixedClass.length > 0 && this.parsedFixedClass) || [];

            const tooth = activeClass.find(
                item => item.toothPosition === toothPosition && parseInt(item.toothNo) === toothNo
            );

            return {
                backgroundColor: tooth ? tooth.color : 'transparent',
                border: '1px solid #ccc',
                borderRadius: '50%',
                width: '20px',
                height: '20px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: tooth ? 'pointer' : 'default'
            };
        },
        handleCircleClick(rowIndex, side, index) {
            const position = rowIndex === 0 ? '上' : '下';
            const toothPosition = (side === 'left' ? '左' : '右') + position;
            const toothNo = side === 'left' ? 9 - index : index;

            // 只处理传入的类别，其余类别为空数组
            const activeClass = (this.parsedPaiClass.length > 0 && this.parsedPaiClass) ||
                (this.parsedActivityClass.length > 0 && this.parsedActivityClass) ||
                (this.parsedFixedClass.length > 0 && this.parsedFixedClass) || [];

            const tooth = activeClass.find(
                item => item.toothPosition === toothPosition && parseInt(item.toothNo) === toothNo
            );

            if (tooth) {
                this.$emit('tooth-click', tooth);
            }
        }
    }
};
</script>

<style scoped>
.tooth-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tooth-row {
    display: flex;
    margin: 10px 0;
}

.tooth-side {
    display: flex;
}

.tooth-side.left {
    margin-right: 20px;
}

.tooth-circle {
    margin: 0 5px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
}
</style>